<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Modern UI CSS">
    <meta name="author" content="Sergey Pimenov">
    <meta name="keywords" content="windows 8, modern style, modern ui, style, modern, css, framework">

    <link href="css/modern.css" rel="stylesheet">
    <link href="css/site.css" rel="stylesheet" type="text/css">
    <link href="js/google-code-prettify/prettify.css" rel="stylesheet" type="text/css">

    <script src="js/jquery-1.8.2.min.js"></script>
    <script src="js/google-analytics.js"></script>
    <script src="js/github.info.js"></script>
    <script src="js/google-code-prettify/prettify.js"></script>
    <script src="js/pagecontrol.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/ocanvas/2.2.1/ocanvas.min.js"></script>
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>

    <title>Reservation</title>
</head>


<body class="modern-ui" onload="prettyPrint()">

<%
	String username = request.getParameter("username");	
%>
    <div class="page secondary">

        <div class="page-header">
            <div class="page-header-content">
                <h1>Reservation</h1>
                <a href = "/Website/BackButtonURL?username=<%=username %>" class="back-button big page-back"></a>
            </div>
        </div>
		
		

        <div class="page-region">
            <div class="page-region-content">
				
				<br>
				<br>
				<h2>${flightID} <%=username %></h2>
				<br>
				<div class="page-control span7" data-role="page-control">
								
					<form action = "/Website/MakePaymentURL" method = "get">
										
						<div class="page-control span8" data-role="page-control">
							<ul>
								<li class="active"><a href="#page1">Step 1</a></li>
							</ul>
	
							<div class="frames">
								<div class="frame active" id="page1">
									<h2>Customer Information</h2>
									<br>
									<div class="input-control text span3 as-block">
										<p style="color:black">First Name: </p> <input type="text" name = "firstName" maxlength="15"/>
										<br>
										<br>
										<p style="color:black">Last Name: </p> <input type="text" name = "lastName" maxlength="15"/>
										<span class="helper"></span>
									</div>
									
								</div>
							</div>
						</div>
						<br>
						<br>
						<div class="page-control span11" data-role="page-control">
							<ul>
								<li class="active"><a href="#page1">step 2</a></li>
							</ul>

							<div class="frames">
							<div class="frame active" id="page1">
									<h2>Seat Option</h2>
  									<canvas id="canvas" width="800" height="300" style="position:absolute;left:0;top:0"></canvas>
  									<img src="icon/seat.png"/>
  									<img src="icon/legend.png"/>
  									<p style="color:black">Seat #: </p> <input type="text" name = "seatID" maxlength="3"/>
  									<script>
  									var flight = ${flight};
  									setInterval("make_connection(flight)",1000);
  									
  									function make_connection (flight){
  										
  										$.post("GetReservedSeats.php",{flight_id:flight},function (data)
										{
  											var reservedSeats = jQuery.parseJSON(data);
  											drawSeat (reservedSeats);
										});
  									}
								
  									
 
  									function drawSeat (seatArray)
  									{
  										var maxColumn = 12;
  										var maxRow = 6;
  	  									var theRectangle;
	  									var canvas = oCanvas.create({
  	  										canvas: "#canvas"
  	  									});
	  									var x_offset = 181.5;
	  									var y_offset = 152.5;
  	  									for (var i=0;i<seatArray.length;i++)
  	  									{
  	  										var seatString = seatArray[i];
  	  										var seatSplit = seatString.split("");
  	  										var seatLetterArray = seatSplit.slice(0,1);
  	  										var seatLetter = seatLetterArray.toString();
  	  										var seatNumberArray = seatSplit.slice(1,3);
  	  										var seatNumber = seatNumberArray.toString();
  	  										seatNumber = seatNumber.replace(/,/g,'');
  	  										
  	  										if (seatLetter == "F" && (seatNumber == "10" || seatNumber == "11") )
											{
												var rectangle = canvas.display.rectangle({
	  		  										x: (parseInt(seatNumber)-10)*11 + (parseInt(seatNumber)-10)*15 + x_offset,
	  		  										y: y_offset+1.5,
	  		  										width: 11,
	  		  										height: 11,
	  		  										fill: "#0aa"
	  		  									});
											}
  	  										else if (seatLetter == "E" && (seatNumber == "10" || seatNumber == "11") )
											{
												var rectangle = canvas.display.rectangle({
  		  											x: (parseInt(seatNumber)-10)*11 + (parseInt(seatNumber)-10)*15 + x_offset,
  		  											y: y_offset+21.5,
  		  											width: 11,
  		  											height: 11,
  		  											fill: "#0aa"
  		  										});
											}
  	  										
  	  										else if (seatLetter == "B" && (seatNumber == "10" || seatNumber == "11") )
											{
												var rectangle = canvas.display.rectangle({
		  												x: (parseInt(seatNumber)-10)*11 + (parseInt(seatNumber)-10)*15 + x_offset,
		  												y: y_offset+59.5,
		  												width: 11,
		  												height: 11,
		  												fill: "#0aa"
		  											});
											}
  	  										
  	  										else if (seatLetter == "A" && (seatNumber == "10" || seatNumber == "11") )
											{
												var rectangle = canvas.display.rectangle({
	  													x: (parseInt(seatNumber)-10)*11 + (parseInt(seatNumber)-10)*15 + x_offset,
	  													y: y_offset+79.5,
	  													width: 11,
	  													height: 11,
	  													fill: "#0aa"
	  												});
											}
  	  										
  	  										else if (seatLetter == "F" && (seatNumber >= 12 && seatNumber <= 16) )
											{
												var rectangle = canvas.display.rectangle({
  														x: (parseInt(seatNumber)-10)*9 + (parseInt(seatNumber)-10)*8.6 + x_offset+27.5,
  														y: y_offset,
  														width: 9,
  														height: 9,
  														fill: "#0aa"
  													});
											}
  	  										
  	  										else if (seatLetter == "E" && (seatNumber >= 12 && seatNumber <= 16) )
											{
												var rectangle = canvas.display.rectangle({
															x: (parseInt(seatNumber)-10)*9 + (parseInt(seatNumber)-10)*8.6 + x_offset+27.5,
															y: y_offset+13.5,
															width: 9,
															height: 9,
															fill: "#0aa"
														});
											}
  	  										
  	  										else if (seatLetter == "D" && (seatNumber >= 12 && seatNumber <= 16) )
											{
												var rectangle = canvas.display.rectangle({
															x: (parseInt(seatNumber)-10)*9 + (parseInt(seatNumber)-10)*8.6 + x_offset+27.5,
															y: y_offset+27,
															width: 9,
															height: 9,
															fill: "#0aa"
														});
											}
  	  											
  	  										else if (seatLetter == "C" && (seatNumber >= 12 && seatNumber <= 16) )
											{
												var rectangle = canvas.display.rectangle({
															x: (parseInt(seatNumber)-10)*9 + (parseInt(seatNumber)-10)*8.6 + x_offset+27.5,
															y: y_offset+55.5,
															width: 9,
															height: 9,
															fill: "#0aa"
														});
											}
  	  										
  	  										else if (seatLetter == "B" && (seatNumber >= 12 && seatNumber <= 16) )
											{
												var rectangle = canvas.display.rectangle({
															x: (parseInt(seatNumber)-10)*9 + (parseInt(seatNumber)-10)*8.6 + x_offset+27.5,
															y: y_offset+70,
															width: 9,
															height: 9,
															fill: "#0aa"
														});
											}
  	  										
  	  										else if (seatLetter == "A" && (seatNumber >= 12 && seatNumber <= 16) )
											{
												var rectangle = canvas.display.rectangle({
															x: (parseInt(seatNumber)-10)*9 + (parseInt(seatNumber)-10)*8.6 + x_offset+27.5,
															y: y_offset+83.5,
															width: 9,
															height: 9,
															fill: "#0aa"
														});
											}
  	  										
  	  										else if (seatLetter == "F" && (seatNumber == 17 || seatNumber == 18) )
											{
												var rectangle = canvas.display.rectangle({
															x: (parseInt(seatNumber)-10)*9 + (parseInt(seatNumber)-10)*13 + x_offset+2,
															y: y_offset,
															width: 9,
															height: 9,
															fill: "#0aa"
														});
											}
  	  										
  	  										else if (seatLetter == "E" && (seatNumber == 17 || seatNumber == 18) )
											{
												var rectangle = canvas.display.rectangle({
															x: (parseInt(seatNumber)-10)*9 + (parseInt(seatNumber)-10)*13 + x_offset+2,
															y: y_offset+13.5,
															width: 9,
															height: 9,
															fill: "#0aa"
														});
											}
  	  										
  	  										else if (seatLetter == "D" && (seatNumber == 17 || seatNumber == 18) )
											{
												var rectangle = canvas.display.rectangle({
															x: (parseInt(seatNumber)-10)*9 + (parseInt(seatNumber)-10)*13 + x_offset+2,
															y: y_offset+27,
															width: 9,
															height: 9,
															fill: "#0aa"
														});
											}
  	  										
  	  										else if (seatLetter == "C" && (seatNumber == 17 || seatNumber == 18) )
											{
												var rectangle = canvas.display.rectangle({
															x: (parseInt(seatNumber)-10)*9 + (parseInt(seatNumber)-10)*13 + x_offset+2,
															y: y_offset+55.5,
															width: 9,
															height: 9,
															fill: "#0aa"
														});
											}
  	  										
  	  										else if (seatLetter == "B" && (seatNumber == 17 || seatNumber == 18) )
											{
												var rectangle = canvas.display.rectangle({
															x: (parseInt(seatNumber)-10)*9 + (parseInt(seatNumber)-10)*13 + x_offset+2,
															y: y_offset+70,
															width: 9,
															height: 9,
															fill: "#0aa"
														});
											}
  	  										
  	  										else if (seatLetter == "A" && (seatNumber == 17 || seatNumber == 18) )
											{
												var rectangle = canvas.display.rectangle({
															x: (parseInt(seatNumber)-10)*9 + (parseInt(seatNumber)-10)*13 + x_offset+2,
															y: y_offset+83.5,
															width: 9,
															height: 9,
															fill: "#0aa"
														});
											}
  	  										
  	  										else if (seatLetter == "F" && (seatNumber >= 19 && seatNumber <= 30) )
											{
												var rectangle = canvas.display.rectangle({
															x: (parseInt(seatNumber)-10)*9 + (parseInt(seatNumber)-10)*8.65 + x_offset+36.5,
															y: y_offset,
															width: 9,
															height: 9,
															fill: "#0aa"
														});
											}
  	  										
  	  										else if (seatLetter == "E" && (seatNumber >= 19 && seatNumber <= 30) )
											{
												var rectangle = canvas.display.rectangle({
															x: (parseInt(seatNumber)-10)*9 + (parseInt(seatNumber)-10)*8.65 + x_offset+35.5,
															y: y_offset+13.5,
															width: 9,
															height: 9,
															fill: "#0aa"
														});
											}
  	  										
  	  										else if (seatLetter == "D" && (seatNumber >= 19 && seatNumber <= 30) )
											{
												var rectangle = canvas.display.rectangle({
															x: (parseInt(seatNumber)-10)*9 + (parseInt(seatNumber)-10)*8.65 + x_offset+36,
															y: y_offset+27,
															width: 9,
															height: 9,
															fill: "#0aa"
														});
											}
  	  										
  	  										else if (seatLetter == "C" && (seatNumber >= 19 && seatNumber <= 30) )
											{
												var rectangle = canvas.display.rectangle({
															x: (parseInt(seatNumber)-10)*9 + (parseInt(seatNumber)-10)*8.65 + x_offset+36,
															y: y_offset+56,
															width: 9,
															height: 9,
															fill: "#0aa"
														});
											}
  	  										
  	  										else if (seatLetter == "B" && (seatNumber >= 19 && seatNumber <= 30) )
											{
												var rectangle = canvas.display.rectangle({
															x: (parseInt(seatNumber)-10)*9 + (parseInt(seatNumber)-10)*8.65 + x_offset+36,
														y: y_offset+70,
															width: 9,
															height: 9,
															fill: "#0aa"
														});
											}
  	  										
  	  										else if (seatLetter == "A" && (seatNumber >= 19 && seatNumber <= 30) )
											{
												var rectangle = canvas.display.rectangle({
															x: (parseInt(seatNumber)-10)*9 + (parseInt(seatNumber)-10)*8.65 + x_offset+36,
															y: y_offset+83.5,
															width: 9,
															height: 9,
															fill: "#0aa"
														});
											}
  	  										
  	  										canvas.addChild(rectangle);
  	  									}
  										
  	  								}
  									</script>

							</div>
						</div>
						<br>
						<br>
						
						<div class="page-control span8" data-role="page-control">
							<ul>
								<li class="active"><a href="#page1">Step 3</a></li>
							</ul>
	
							<div class="frames">
								<div class="frame active" id="page1">
								
									<h2>Meal Option</h2><br>				
										
									<div class = "span3">
										<label class="radio" onclick="">
											<input type = "radio" name = "mealOption" value = "Chicken"/>
										     <span>Chicken</span>  										     
										</label>	
										<br>
										<br>
										<label class="radio" onclick="">
											<input type = "radio" name = "mealOption" value = "Beef"/>
										     <span>Beef</span>  										     
										</label>	
										<br>
										<br>
										<label class="radio" onclick="">
											<input type = "radio" name = "mealOption" value = "Vegetarian"/>
										     <span>Vegetarian</span>  										     
										</label>	
										
									</div>		
										
								</div>
							</div>						
						</div>
						<br>
						<br>
											
						<input type = "hidden" name = "username" value = <%=username %>>
						<input type="hidden" name="flightID" value=${flightID}>
						<input type="hidden" name="connecting" value=0>
						<input type="submit" value="Submit" style="margin-left: 530px"/>
					</form>
				
				</div>
			</div>
		</div>
            </div>
        </div>

    </div>

</body>
</html>